<template>
  <view class="ad-blocklist-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">广告黑名单</text>
      <view class="clear-btn" @tap="clearAllBlockedAds">
        <text class="clear-text">清空</text>
      </view>
    </view>
    
    <!-- 黑名单介绍 -->
    <view class="blocklist-intro">
      <text class="intro-text">
        您可以在此管理已屏蔽的广告。被屏蔽的广告将不再在应用中显示。
      </text>
    </view>
    
    <!-- 黑名单统计 -->
    <view class="blocklist-stats">
      <text class="stats-number">{{ blockedAds.length }}</text>
      <text class="stats-label">已屏蔽广告数量</text>
    </view>
    
    <!-- 分类筛选 -->
    <view class="filter-section">
      <text class="filter-title">按类型筛选</text>
      <view class="filter-tags">
        <view 
          class="filter-tag"
          :class="{ 'active': activeFilter === 'all' }"
          @tap="setFilter('all')"
        >
          <text class="tag-text">全部</text>
        </view>
        <view 
          class="filter-tag"
          :class="{ 'active': activeFilter === 'video' }"
          @tap="setFilter('video')"
        >
          <text class="tag-text">视频</text>
        </view>
        <view 
          class="filter-tag"
          :class="{ 'active': activeFilter === 'banner' }"
          @tap="setFilter('banner')"
        >
          <text class="tag-text">横幅</text>
        </view>
        <view 
          class="filter-tag"
          :class="{ 'active': activeFilter === 'reward' }"
          @tap="setFilter('reward')"
        >
          <text class="tag-text">激励</text>
        </view>
      </view>
    </view>
    
    <!-- 黑名单列表 -->
    <view class="blocklist-section" v-if="filteredAds.length > 0">
      <text class="section-title">已屏蔽广告</text>
      
      <view 
        class="blocked-ad-item"
        v-for="ad in filteredAds"
        :key="ad.id"
      >
        <!-- 广告内容 -->
        <view class="ad-content">
          <text class="ad-title">{{ ad.title }}</text>
          <text class="ad-description">{{ ad.description }}</text>
          <text class="blocked-time">屏蔽于 {{ formatBlockedTime(ad.blockedAt) }}</text>
        </view>
        
        <!-- 操作按钮 -->
        <view class="ad-actions">
          <button class="unblock-btn" @tap="unblockAd(ad.id)">解除屏蔽</button>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <text class="empty-icon">🚫</text>
      <text class="empty-text">您的广告黑名单为空</text>
      <text class="empty-desc">
        当您在浏览广告时点击"不感兴趣"，广告将被添加到黑名单中
      </text>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-tips">
      <text class="tips-text">
        📌 提示：定期管理您的黑名单，确保不会错过可能感兴趣的内容
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 筛选条件
      activeFilter: 'all', // 'all', 'video', 'banner', 'reward'
      
      // 模拟黑名单数据
      blockedAds: [
        {
          id: 'blocked1',
          type: 'video',
          title: '某品牌手机新品发布会',
          description: '新一代智能手机，超强摄影能力，超长续航',
          blockedAt: Date.now() - 86400000 * 3 // 3天前
        },
        {
          id: 'blocked2',
          type: 'banner',
          title: '限时特惠：全场商品5折起',
          description: '年中大促，错过再等一年',
          blockedAt: Date.now() - 86400000 * 5 // 5天前
        },
        {
          id: 'blocked3',
          type: 'reward',
          title: '观看视频领取优惠券',
          description: '观看完整视频即可获得50元优惠券',
          blockedAt: Date.now() - 86400000 * 7 // 7天前
        }
      ],
      
      // 过滤后的广告列表
      filteredAds: []
    };
  },
  onLoad() {
    // 加载黑名单数据
    this.loadBlockedAds();
    // 初始化过滤
    this.filterAds();
  },
  methods: {
    // 加载黑名单数据
    loadBlockedAds() {
      // 模拟从本地存储加载黑名单
      const savedBlockedAds = uni.getStorageSync('blockedAds');
      if (savedBlockedAds !== '') {
        this.blockedAds = JSON.parse(savedBlockedAds);
      } else {
        // 如果没有保存的数据，使用默认数据
        this.saveBlockedAds();
      }
    },
    
    // 保存黑名单数据
    saveBlockedAds() {
      uni.setStorageSync('blockedAds', JSON.stringify(this.blockedAds));
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 设置筛选条件
    setFilter(filter) {
      this.activeFilter = filter;
      this.filterAds();
    },
    
    // 过滤广告
    filterAds() {
      // 根据类型过滤
      if (this.activeFilter === 'all') {
        this.filteredAds = [...this.blockedAds];
      } else {
        this.filteredAds = this.blockedAds.filter(ad => ad.type === this.activeFilter);
      }
      
      // 按屏蔽时间倒序排列
      this.filteredAds.sort((a, b) => b.blockedAt - a.blockedAt);
    },
    
    // 格式化屏蔽时间
    formatBlockedTime(timestamp) {
      const now = Date.now();
      const diff = now - timestamp;
      
      if (diff < 86400000) {
        // 一天内
        const hours = Math.floor(diff / 3600000);
        if (hours < 1) {
          const minutes = Math.floor(diff / 60000);
          return minutes < 1 ? '刚刚' : `${minutes}分钟前`;
        }
        return `${hours}小时前`;
      } else if (diff < 7 * 86400000) {
        // 一周内
        const days = Math.floor(diff / 86400000);
        return `${days}天前`;
      } else {
        // 超过一周
        const date = new Date(timestamp);
        return `${date.getMonth() + 1}月${date.getDate()}日`;
      }
    },
    
    // 解除屏蔽
    unblockAd(adId) {
      uni.showModal({
        title: '解除屏蔽',
        content: '确定要解除对此广告的屏蔽吗？解除后，类似广告可能会再次出现。',
        confirmText: '解除',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 从黑名单中移除广告
            const index = this.blockedAds.findIndex(ad => ad.id === adId);
            if (index > -1) {
              this.blockedAds.splice(index, 1);
              this.saveBlockedAds();
              this.filterAds();
            }
            
            uni.showToast({
              title: '已解除屏蔽',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 清空所有黑名单
    clearAllBlockedAds() {
      if (this.blockedAds.length === 0) {
        uni.showToast({
          title: '黑名单为空',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '清空黑名单',
        content: `确定要清空所有已屏蔽的广告吗？\n当前共有${this.blockedAds.length}条记录。`,
        confirmText: '清空',
        cancelText: '取消',
        confirmColor: '#ff4d4f',
        success: (res) => {
          if (res.confirm) {
            // 清空黑名单
            this.blockedAds = [];
            this.saveBlockedAds();
            this.filterAds();
            
            uni.showToast({
              title: '黑名单已清空',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.ad-blocklist-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.clear-btn {
  padding: 10rpx 20rpx;
}

.clear-text {
  font-size: 32rpx;
  color: #ff4d4f;
}

/* 黑名单介绍 */
.blocklist-intro {
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 黑名单统计 */
.blocklist-stats {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-number {
  font-size: 80rpx;
  font-weight: 700;
  color: #ff4d4f;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 32rpx;
  color: #333;
}

/* 筛选器 */
.filter-section {
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.filter-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.filter-tag {
  padding: 15rpx 30rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 40rpx;
  background-color: #fff;
}

.filter-tag.active {
  border-color: #ff4d4f;
  background-color: #fff2f0;
}

.tag-text {
  font-size: 28rpx;
  color: #666;
}

.filter-tag.active .tag-text {
  color: #ff4d4f;
  font-weight: 600;
}

/* 黑名单列表 */
.blocklist-section {
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  padding: 30rpx 40rpx 0 40rpx;
}

.blocked-ad-item {
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.blocked-ad-item:last-child {
  border-bottom: none;
}

/* 广告内容 */
.ad-content {
  margin-bottom: 20rpx;
}

.ad-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.ad-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10rpx;
  display: block;
}

.blocked-time {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 操作按钮 */
.ad-actions {
  display: flex;
  justify-content: flex-end;
}

.unblock-btn {
  padding: 15rpx 40rpx;
  font-size: 28rpx;
  background-color: #fff;
  color: #07c160;
  border: 2rpx solid #07c160;
  border-radius: 60rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.empty-desc {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
}

/* 底部提示 */
.bottom-tips {
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-top: 20rpx;
}

.tips-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
</style>